<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>角色编辑</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/favicon.ico}"/>
    <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/common.css}">
    <link rel="stylesheet" th:href="@{/css/animate.min.css}">
    <link rel="stylesheet" th:href="@{/lib/layui/extend/formSelects-v4.css}"/>
</head>

<body>
<div class="z-body animated fadeIn">
    <form action="" method="post" class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <label for="roleName" class="layui-form-label">
                角色名称
            </label>
            <div class="layui-input-block">
                <input type="text" id="roleName" name="roleName" th:value="${role?.roleName}"
                       lay-verify="required" lay-vertype="tips"
                       autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label for="remark" class="layui-form-label">
                描述
            </label>
            <div class="layui-input-block">
                <input type="text" id="remark" name="remark" th:value="${role?.remark}"
                       lay-verify="required" lay-vertype="tips"
                       autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block" style="margin-left:0;text-align:center;">
                <input type="hidden" id="roleId" name="roleId" th:value="${role?.roleId}">
                <button th:text="${role}?'修改':'增加'" class="layui-btn layui-btn-normal btn-w100" lay-submit=""
                        data-th-lay-filter="${role}?'edit':'add'"></button>
            </div>
        </div>
    </form>
</div>

<script th:src="@{/lib/jquery/jquery.min.js}"></script>
<script th:src="@{/lib/layui/layui.js}"></script>
<script th:src="@{/js/common.js}"></script>

<script>
    layui.config({
        base: '/lib/layui/extend/'
    }).extend({
        formSelects: 'formSelects-v4'
    }).use(['form', 'layer', 'formSelects', 'dtree'], function () {
        $ = layui.jquery;
        var form = layui.form
            , layer = layui.layer
            , formSelects = layui.formSelects
            , dtree = layui.dtree;

        //监听新增提交
        form.on('submit(add)', function (form) {
            console.log("=====add======");
            // form.field.role = formSelects.value('role-select', 'val');
            $.post('/role', form.field, function (result) {
                handlerResult(result, addDone);
            });
            return false;
        });

        //监听编辑提交
        form.on('submit(edit)', function (form) {
            console.log("=====edit======");
            form.field._method = 'PUT';//隐藏域，使其支持Restful风格，还需要再application.yml中打开HiddenHttpMethodFilter过滤
            // form.field.role = formSelects.value('role-select', 'val');
            $.post('/role', form.field, function (result) {
                handlerResult(result, editDone);
            });
            return false;
        });

        function addDone(data) {
            layer.msg("添加成功", {icon: 6});
        }

        function editDone(data) {
            layer.msg("修改成功", {icon: 6});
        }
    });
</script>
</body>

</html>